import React from "react";
interface Props {
  name: string;
  children?: React.ReactNode;
}

/**
 * 外部传一个children是一个对象
 * 传多个元素是一个数组
 * @param props
 * @returns
 */
export const ChildDemo = (props: Props) => {
  console.log("测试props的children属性===>", props);
  // 如果 children 是一个数组，可以将其拆分为多个元素
  const childrenArray = React.Children.toArray(props.children);
  // 假设我们想要将第一个子元素显示在一个位置，将其他子元素显示在另一个位置
  const firstChild = childrenArray[0];
  const otherChildren = childrenArray.slice(1);
  return (
    <div>
      <h3>测试children属性</h3>
      <div>{props.name}</div>
      <div>{props.children}</div>
      <hr />
      <div>
        这里想要展示外部自定义元素：
        {firstChild}
        <div>{otherChildren}</div>
      </div>
    </div>
  );
};
